<template>
	<view class="content" v-if="info">
		<view class="c-top">
			<view class="c-t-l">
				<view class="tt-w">
					<view class="tt">{{$t('index.defen')}}</view>
					<view class="yuan">
						<view class="y-text">
							<view>{{info.matchInfo.allScore}}</view>
							<view>{{$t('index.quanchang')}}</view>
						</view>
						<view style="width: 150rpx;height: 150rpx;">
							<qiun-data-charts type="ring" :chartData="attackData" :opts="opts" :animation="false" />
						</view>
						<view class="y-text">
							<view>{{info.matchInfo.halfScore}}</view>
							<view>{{$t('index.banchang')}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="c-t-l">
				<view class="tt-w">
					<view class="tt">{{$t('index.jifen')}}</view>
					<view class="yuan">
						<view class="y-text">
							<view>{{info.matchInfo.allScorePoor}}</view>
							<view>{{$t('index.quanchang')}}</view>
						</view>
						<view style="width: 150rpx;height: 150rpx;">
							<qiun-data-charts type="ring" :chartData="attack_dangerData" :opts="opts" :animation="false" />
						</view>
						<view class="y-text">
							<view>{{info.matchInfo.halfScorePoor}}</view>
							<view>{{$t('index.banchang')}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="c-center">
			<view class="c-c-h">
				<view class="c-c-h-l">
					<image :src="computImageUrl(homeData.homeLogo)" class="image"></image>
					{{homeData.homeName}}
				</view>
				<view class="c-c-h-r">
					{{homeData.awayName}}
					<image :src="computImageUrl(homeData.awayLogo)" class="image"></image>
				</view>
			</view>
			<view v-for="(item,index) in info.detail" :key="index">
				<view class="text">{{item.name}}</view>
				<view class="c-c-c">
					<view class="c-c-h-l">
						{{item.home}}
					</view>
					<view class="line">
						<view class="l-l" :style="{flex:item.home||1}"></view>
						<view class="l-r" :style="{flex:item.away||1}"></view>
					</view>
					<view class="c-c-h-r">
						{{item.away}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		props: {
			matchId: {
				type: [String, Number],
				default: ''
			},
			homeData:{
				type: Object,
				default:()=>{
					return {}
				}
			}
		},
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
			computImageUrl(){
				return (url)=>{
					let domain = url.split("/")
					domain = domain[0]+'//'+ domain[2]
					let finalUrl = url.replace(domain, "");
					let imageurl= getApp().globalData.AppConfig.cdnDomain + finalUrl
					return imageurl
				}
			}
		},
		components: {},
		data() {
			return {
				info:'',
				attackData:'',//总得分
				attack_dangerData:'',//总分差
				opts: {
					dataLabel: false, //是否显示图表区域内数据点上方的数据文案
					dataPointShape: false, //是否显示数据点的图形标识
					dataPointShapeType: 'hollow', //图形标识点显示类型，可选值：'solid'实心,'hollow'空心
					rotate: false,
					rotateLock: false,
					color: ["#c72d5e","#ffaa00"],
					enableScroll: false,
					legend: {
						show: false,
					},
					title: {
						name: "",
					},
					subtitle: {
						name: "",
					},
					extra: {
						ring: {
							centerColor: '#10182b',
							ringWidth: 3,
							border: false
						}
					}
				}
			}
		},
		mounted() {
			this.bkdataMatchDetail()
		},
		methods: {
			bkdataMatchDetail() {
				uni.$u.http.get(this.api.api_v1_bkdata_matchDetail, {
					params: {
						matchId: this.matchId
					}
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data
						let attack = {
							series: [{
								data: [{
									"value":parseInt(this.info.matchInfo.allScore)||1
								}, {
									"value":parseInt(this.info.matchInfo.halfScore)
								}]
							}]
						};
						let attack_danger = {
							series: [{
								data: [{
									"value":parseInt(this.info.matchInfo.allScorePoor)||1
								}, {
									"value":parseInt(this.info.matchInfo.halfScorePoor)
								}]
							}]
						};
						this.attackData = JSON.parse(JSON.stringify(attack));
						this.attack_dangerData = JSON.parse(JSON.stringify(attack_danger));
					
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		color: #bfbfbf;
		font-size: 12px;
		.c-top {
			margin-bottom: 10px; display: flex;justify-content: space-between;width: 100%;background-color: #001E28;padding: 10px 0;
			.c-t-l,.c-t-r ,.c-t-c {
				flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: space-between;
				.tt-w{
					flex: 1;display: flex;flex-direction: column;align-items: center;
					.yuan{
						display: flex;align-items: center;
						.y-text{
							display: flex;flex-direction: column;justify-content: center;align-items: center;
						}
					}
					
				}
				.text{
					margin:0 0 10px;
				}
			}
		}
		.c-center{
			background-color: #001E28;padding: 10px;
			.text{
				width: 100%;text-align: center;
			}
			.c-c-h{
				padding: 10px;display: flex;justify-content: space-between;
				.c-c-h-l,.c-c-h-r{
					display: flex;justify-content: center;align-items: center;
					.image{
						width: 20px;height: 20px;
					}
				}
			}
			.c-c-c{
				padding: 10px;display: flex;justify-content: space-between;width: 100%;box-sizing: border-box;
				.c-c-h-l,.c-c-h-r{
					margin: 0 5px;
				}
				.line{
					flex: 1;display: flex;align-items: center;
					.l-l,.l-r{
						flex: 1;height: 6px;
					}
					.l-l{
						border-radius: 3px 0 0 3px;background-color: #c72d5e;
					}
					.l-r{
						border-radius:0 3px 3px 0;background-color: #ffaa00;
					}
				}
			}
			
		}
		
	}
</style>